<template>
  <div v-if="productList.length > 0" style="margin-top:2px;background:white;padding:0 30rpx">
    <div class="title acea-row row-between-wrapper" style="padding: 10px 0;">
        <div class="text">
          <div class="name line1">{{title}}</div>
        </div>
        <div
          @click="$router.push({ path: '/pages/shop/powerPush/main'})"
          class="more"
        >
          更多
          <span class="iconfont icon-jiantou"></span>
        </div>
      </div>
    <div :style="{backgroundColor: config.backgroundColor}">
      <div v-if="config.columns == 1">
        <div class="groupBox" v-for="item in productList" :key="item.id"
        @click="$router.push({ path: '/pages/shop/GoodsCon/index',query:{id:item.id} })"
        >
          <div class="groupShop flex">
            <div class="groupShop-img">
              <image :src="item.image" mode="widthFix" />
            </div>
            <div class="groupShop-detail">
              <div class="title">{{item.storeName}}</div>
              <div class="text">{{item.storeInfo}}</div>
              <div class="sale">已售{{item.sales + item.ficti}}{{ item.unitName }}</div>
              <div class="price colorRed font16">
                ￥{{item.price}}
                <span class="origi font13">￥{{item.otPrice}}</span>
              </div>
              <div class="btn">
                <image
                  src="http://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/index-design/buy.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <van-row  v-for="(row, i) in rows" :key="i" >
          <van-col :span="colSpan" v-for="(item, j) in row" :key="j" style="padding:0!important">
            <div class="detail-box" style="background:#ffffff;display: flex;flex-direction: column;" @click="$router.push({ path: '/pages/shop/GoodsCon/index',query:{id:item.id} })">
              <image :src="item.image" mode="widthFix" />
              <div class="product-name-box" style="padding-left:3px;">{{item.storeName}}</div>
              <div class="product-price1-box" style="padding-bottom:6px;padding-left:3px;">
                <span style="font-weight: bold">￥{{item.price}}</span>
                <span class="product-price2-box">￥{{item.otPrice}}</span>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getPowerful } from "@/api/public";
export default {
  name: "product-list",
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      productList: [],
      type: '',
      title: '',
      rows: []
    };
  },
  mounted() {
    // console.log("获取的强推商品config",this.config)
    this.getData()
  },
  methods: {
    getData() {
      let param = {ids: this.config.ids.join(',')}
      getPowerful(param).then(res => {
        // console.log("获取的强推商品是什么",res.data)
        if (res.status == 200) {
          this.productList = res.data;
          this.processRows()
        }
      })
      this.type = this.config.type;
      this.title = this.config.title;
    },
    processRows() {
      this.rows = [];
      if (this.productList.length == 0) {
        return;
      }
      for (let i = 0; i < this.rowCount; i++) {
        let start = i * this.config.columns, end = (i + 1) * this.config.columns
        let row = [];
        for (let j = start; j < end; j++) {
          if (this.productList[j]) {
            row.push(this.productList[j]);
          }
        }
        this.rows.push(row)
      }
    }
  },
  computed: {
    rowCount() {
      return Math.ceil(this.productList.length / this.config.columns);
    },
    colSpan() {
      return Math.floor(24 / this.config.columns);
    },
    boxStyle() {
      return {
        backgroundColor: this.config.backgroundColor
      };
    },
    imageWidth() {
      return this.config.columns == 2 ? 177 : 115;
    },
  }
};
</script>

<style scoped>
.more{
  font-size: 26rpx;
  color: #999999
}
.detail-box {
  position: relative;
}
.detail-box image {
  width: 98%;
  height: 175px!important;
  margin-left: 1%;
}
.product-name-box {
  width: 95%;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin: 10px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.product-price1-box {
  font-size: 36rpx;
  color: #ff563d;
  /* font-weight:bold; */
}
.product-price2-box {
  font-size: 26rpx;
  color: #999999;
  text-decoration: line-through;
  padding-left: 16rpx;
}
.product-image-box {
  background: url(http://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/index-design/image-bg.png)
    no-repeat;
}
.groupBox {
  background: rgb(246, 246, 246);
  height: 260rpx;
}
.groupBox .groupShop {
  /* margin-bottom: 6px; */
  background: #ffffff;
  padding: 0 3% 20rpx 3%;
  align-items: center;
  height:240rpx;
}

.groupBox .groupShop .groupShop-img image {
  width: 120px;
  height: 240rpx!important;
}
.groupBox .groupShop .groupShop-detail {
  position: relative;
  width: 242px;
  padding-left: 16px;
}

.groupBox .groupShop .groupShop-detail .title {
  margin-bottom: 8px;
  width: 180px;
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.groupBox .groupShop .groupShop-detail .text {
  width: 180px;
  font-size: 14px;
  color: #666666;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: 26px;
  margin-bottom: 12px;
}
.groupBox .groupShop .groupShop-detail .sale {
  width: 180px;
  font-size: 13px;
  color: #999999;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: 26px;
  margin-bottom: 8px;
}
.groupBox .groupShop .groupShop-detail .pepoles {
  display: flex;
  align-items: center;
}

.groupBox .groupShop .groupShop-detail .origi {
  text-decoration: line-through;
  color: #999999;
  margin: 8px 0 4px 0;
}

.groupBox .groupShop .groupShop-detail .price {
  font-weight: bold;
}

.groupBox .groupShop .groupShop-detail .btn image {
  position: absolute;
  right: 8px;
  bottom: -4px;
  width: 56rpx;
  height: 56rpx;
}

.colorRed {
  color: #f85353;
}
.font16 {
  font-size: 16px;
}
.font14 {
  font-size: 14px;
}
.font13 {
  font-size: 13px;
}
.flex {
  display: flex;
}
</style>
